document.getElementById('imageInput').addEventListener('change', function () {
    var file = this.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var imagePreview = document.getElementById('imagePreview');
            var img = new Image();
            img.onload = function () {
                var aspectRatio = img.width / img.height;
                if (aspectRatio > 1) {
                    imagePreview.style.backgroundSize = 'auto 100%';
                } else {
                    imagePreview.style.backgroundSize = '100% auto';
                }
                imagePreview.style.backgroundImage = 'url(' + e.target.result + ')';
                imagePreview.querySelector('.upload-overlay').style.display = 'block';
                imagePreview.querySelector('.upload-text').style.display = 'none';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

document.getElementById('nameInput').addEventListener('input', function () {
    var name = this.value;
    if (name.length > 12) {
        alert('字符数量不能超过12个！');
        this.value = name.substring(0, 12); // 如果超过12个字符，将输入框的值截断为前12个字符
    }
});

function uploadImage() {
    var name = document.getElementById('nameInput').value;
    var file = document.getElementById('imageInput').files[0];

    if (name && file) {
        if (!file.type.startsWith('image/')) {
            alert('请选择有效的图像文件！');
            return;
        }

        var reader = new FileReader();
        reader.onload = function (e) {
            var base64ImageData = e.target.result;
            var jsonData = {
                userName: name,
                mobile: '',
                fileBase64Str: base64ImageData
            };

            console.log(jsonData);

            fetch('https://erp.yingketec.com/prod-api/app/front/cylinderScreen/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8'
                },              
                body: JSON.stringify(jsonData)
            })
                .then(response => {
                    console.log('Response status:', response.status); // 打印响应的状态码
                    console.log('Response OK:', response.ok); // 打印响应是否成功
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error('上传失败，请重试！');
                    }
                })
                .then(data => {
                    console.log('Data received:', data); // 打印收到的数据
                    if (data.code === 200) {
                        alert(data.msg);
                        // 上传成功后可以进行一些操作，比如清空输入框和图片预览区域
                        document.getElementById('nameInput').value = '';
                        document.getElementById('imageInput').value = '';
                        var imagePreview = document.getElementById('imagePreview');
                        imagePreview.style.backgroundImage = 'none';
                        imagePreview.querySelector('.upload-overlay').style.display = 'none';
                        imagePreview.querySelector('.upload-text').style.display = 'block';
                    } else {
                        throw new Error(data.msg);
                    }
                })
                .catch(error => {
                    console.error('上传失败：', error.message);
                    alert('上传失败：' + error.message);
                });
        };
        reader.readAsDataURL(file);
    } else {
        alert('请输入名字并选择图片！');
    }
}